@charset "utf-8";
$font-size:28px; //定义根字体大小
@function r($px) {
    @return $px/$font-size*1rem;
}
.web {
    width:100%;
    height: 100%;
    //弹出窗口
    .popup-window {
        width:100%;
        height:100%;
        background:rgba(0,0,0,.7);
        position: absolute;
        z-index: 1;
        .window {
            width: r(546px);
            height: r(702px);
            background: white;
            border-radius: r(20px);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 2;
            text-align: center;
            padding-top: 7.8%;
            .QR-code {
                display: inline-block;
                width: r(269px);
                height: r(269px);
                img {
                    width: 100%;
                }
            }
            .price,
            .tips {
                display: block;
                color: #888888;
            }
            .price {
                font-size: r(36px);
                line-height: r(55px);
                margin-top: r(15px);
            }
            .tips {
                font-size: r(20px);
            }
            .send,
            .close {
                width: r(505px);
                height: r(80px);
                border-radius: r(10px);
                font-size: r(30px);
                border: r(1px) solid #b7b7b7;
            }
            .send {
                background: #0aba07;
                color: white;
                margin-top: 10.9%;
            }
            .close {
                background: #f4f5f6;
                color: #8c8c8c;
                margin-top: 3.1%;
            }
        }
    }
    header {
        width: 100%;
        height: r(90px);
        position: relative;
        top: 0;
        background: #f7f7f7;
        border-bottom: 1px solid #c1c1c1;
        padding:r(14px) r(20px) r(16px);
        i {
            font-size: r(38px);
            color: #848689;
            font-weight: bold;
            line-height: r(60px);
        }
        .nav-name {
            position:absolute;
            left:50%;
            transform:translateX(-50%);
            line-height: r(60px);
            font-size: r(35px);
            color: #333333;
        }
        .collection-record{
            font-size:r(28px);
            line-height: r(60px);
            a{
                color:#666666;
            }
        }
    }
    section{
        .head{
            width:100%;
            height:r(240px);
            border-bottom: 1px solid #e1e2e4;
            position:relative;
            .img{
                display:inline-block;
                width:r(125px);
                height:r(125px);
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                img{
                    width:100%;
                }
            }
        }
        .frame{
            width:100%;
            height:r(93px);
            line-height:r(93px);
            padding-left:4.7%;
            background:white;
            border-bottom: 1px solid #e1e2e4;
            .frame-label{
                font-size:r(26px);
                color:#333333;
                margin-right:8%;
            }
            .frame-input{
                width:r(428px);
                border:none;
                font-size:r(26px);
                color:#cccccc;
            }
            input[type=text]{
                padding-left:r(3px);
            }
        }
    }
    .foot{
        width:100%;
        height: r(618px);
        background:#f3f4f6;
        text-align: center;
        padding-top:5%;
        input[type=button]{
            width:r(565px);
            height:r(85px);
            background:#cc3333;
            border-radius:r(10px);
            font-size:r(35px);
            color:white;
            border: r(1px) solid #b7b7b7;
        }
        .explain{
            display:block;
            font-size:r(20px);
            color:#153fc6;
            margin-top:4%;
        }
    }
}
//媒体查询
@media screen and (min-width:320px){
    html{
        font-size:14px;
    }
}
@media screen and (min-width:360px){
    html{
        font-size:16px;
    }
}
@media screen and (min-width:375px){
    html{
        font-size:16.5px;
    }
}
@media screen and (min-width:414px){
    html{
        font-size:18px;
    }
}